﻿<template>
  <el-form v-loading="loading" :model="addNewsForm" :rules="addNewsFormRules" ref="addNewsForm" label-width="100px"
    class="demo-ruleForm">
    <el-row>
      <el-col :span="10">
        <!-- 新闻标题输入框 -->
        <el-form-item label="新闻标题" prop="title" style="width:100%" :rules="addNewsFormRules.newsName">
          <el-input v-model="addNewsForm.title"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <!-- 新闻是否显示 -->
        <el-form-item label="是否显示" prop="show">
          <el-select v-model="addNewsForm.show" placeholder="请选择">
            <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 标题图片上传 -->
    <el-form-item label="标题图片">
      <el-upload class="avatar-uploader" ref="upload" :action="config.addNewsInfoUrl" :show-file-list="false"
        :on-change="changeImg" :on-success="uploadSuccess" :auto-upload="false" :on-error="uploadEro" :data="uploadData"
        accept=".jpg,.jpeg,.png">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>

    <el-form-item label="新闻简介">
      <el-input  type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容"
        v-model="addNewsForm.contentStr">
      </el-input>
    </el-form-item>

    <el-form-item label="新闻内容" prop="content" >
      <!-- 富文本编辑器 -->
      <quill-editor class="editor" ref="myQuillEditor" v-model="addNewsForm.content">
      </quill-editor>
    </el-form-item>

    <!-- 添加和重置按钮 -->
    <el-form-item style="padding-top:80px">
      <el-button type="primary" @click="submitForm('addNewsForm')">立即添加</el-button>
      <el-button @click="resetForm('addNewsForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>


<script>
  //富文本
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import Quill from 'quill'
  import {
    quillEditor
  } from 'vue-quill-editor'
  import ImageResize from 'quill-image-resize-module' //添加
  Quill.register('modules/imageResize', ImageResize) //添加

  import store from '@/vuex/store'
  import {
    addNewsInfo,
    showNews1
  } from "@/api/newsApi";
  import config from "@/config/config"
  export default {
    data() {
      return {
        config,
        loading: false,
        imageUrl: '',
        options: [{
            id: 1,
            label: "显示"
          },
          {
            id: 0,
            label: "不显示"
          }
        ],
        uploadData: {
          appKey: '',
          appFlag: 2,
          token: store.getters.token,
          versionCode: 0,
          param: ''
        },
        addNewsForm: {
          title: "",
          titleImage: "",
          content: "",
          createTime: "",
          show: 1
        },
        addNewsFormRules: {
          newsName: [{
              required: true,
              message: "请输入新闻标题",
              trigger: "blur"
            },
            {
              min: 1,
              max: 100,
              message: "长度在 5 到 100 个字符",
              trigger: "blur"
            }
          ]
        }
      };
    },
    methods: {
      //提交
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.uploadData.param = JSON.stringify(this.addNewsForm)
            this.$refs.upload.submit();
            this.loading = true;
            setTimeout(
              () => this.resetForm('addNewsForm'),
              1000
            )
          } else {
            return false;
          }
        });
      },
      uploadSuccess(file) {
        this.$message({
          message: '发布新闻成功',
          type: 'success'
        });
        this.loading = false
      },
      uploadEro(file) {
        this.$message.error('发布失败');
        this.loading = false
      },

      // 清空内容
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.imageUrl = '';
        this.addNewsForm.contentStr = ''
      },
      changeImg(file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      }
    }
  };
</script>



<style>
  .editor {
    line-height: normal !important;
    height: 600px;
  }

  .ql-snow .ql-tooltip[data-mode="link"]::before {
    content: "请输入链接地址:";
  }

  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: "保存";
    padding-right: 0px;
  }

  .ql-snow .ql-tooltip[data-mode="video"]::before {
    content: "请输入视频地址:";
  }


  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: "14px";
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
    content: "10px";
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
    content: "18px";
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
    content: "32px";
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: "文本";
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: "标题1";
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: "标题2";
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: "标题3";
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: "标题4";
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: "标题5";
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: "标题6";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: "标准字体";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
    content: "衬线字体";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
    content: "等宽字体";
  }
</style>
// 标题图片
<style scoped>
  @import url("//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css");

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

// 上传图片样式
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>